<template>
    <view-box style="background:#F3F6F7;">
        <div class="" style="height: auto;">
            <tab :line-width="2" class="ounforum">
                <tab-item v-if="index === 0" :selected="category === 0" @on-item-click="onItemClick(0)">
                    <div class="fong-cpo"><i slot="icon" style="font-size:22px;position: relative;top:2px;" class="iconfont icon-fenlei"></i></div>
                    <span style="font-size: 16px;">{{selcts}}</span>
                </tab-item>
                <tab-item v-if="index === 1" :selected="category === 0" @on-item-click="myClick(0)">
                    <div class="fong-cpo"><i slot="icon" style="font-size:22px;position: relative;top:2px;" class="iconfont icon-fenlei"></i></div>
                     <span style="font-size: 16px;">{{selcts}}</span>
                </tab-item>
                <tab-item :selected="category === 1" @on-item-click="myClick(1)">
                    <div class="fong-cpoc"><i slot="icon" style="font-size:22px;position: relative;top:2px;" class="iconfont icon-wodetiezi"></i></div>
                      <span style="font-size: 16px;">我的帖子</span>
                </tab-item>
            </tab>
            <div style="height:10px;"></div>
          <flexbox orient="vertical" v-if="index === 0">
            <flexbox-item v-for="(itemc, index) in items" :key="index" >
                <div class="flex-demo myapply-ciong" >
                    <div class="a-click" @click="$router.push('/particulars?uidi=' + itemc.id)">
                       <p style="width:100%;font-weight: 600;line-height:35px;overflow: hidden;">{{itemc.title}}</p>
                       <p class="width-hiuy" style="width:100%;color:#bababa;font-size:14px;">
                      {{itemc.content}}
                        </p>
                    </div>
                    <div class="">
                       <div class="cong-coplj">
                        <div class="kshi-cop">
                            <div class="kshi-cop-cong" style="width:70px;">
                                <p style="margin-right:5px;"><img :src="itemc.user.avatar" alt=""></p>
                            </div>
                            <div class="kshi-cop-cong1">
                                <p style="font-size:14px;color:#bababa;width:100%;">{{itemc.user.name}}</p>
                                <p style="font-size:12px;color:#bababa;width:100%;">{{itemc.created_at}}</p>
                            </div>
                         </div>
                        <div class="item-coplj">
                           <p style="width:50%;color:#32B6C6;" v-if="itemc.zan !== null">
                               <i slot="icon" class="iconfont icon-dianzanmianxing"></i>
                               <span>{{itemc.zan_num}}</span>
                           </p>
                           <p style="width:50%;color:#bababa;" v-if="itemc.zan === null" @click="zan(itemc.id)">
                               <i slot="icon" class="iconfont icon-dianzan"></i>
                               <span>{{itemc.zan_num}}</span>
                           </p>
                           <p style="width:50%;color:#bababa;" @click="$router.push('/comments?pldi=' + itemc.id + '&&uid=' + itemc.user.id)">
                            <i slot="icon" class="iconfont icon-pinglun1"></i>
                            <span>{{itemc.comment_num}}</span>
                           </p>
                        </div>
                        
                       </div>
                    </div>
                </div>
            </flexbox-item>
        </flexbox>
        <flexbox orient="vertical" v-if="index === 1">
            <flexbox-item v-for="(itemc, index) in items" :key="index" >
                  <div class="flex-demo myapply-ciong" >
                    <div class="a-click" @click="$router.push('/particulars?uidi=' + itemc.id)">
                       <p style="width:100%;font-weight: 600;line-height:35px;overflow: hidden;">{{itemc.title}}</p>
                       <p class="width-hiuy" style="width:100%;color:#bababa;font-size:14px;">
                        {{itemc.content}}
                        </p>
                    </div>
                    <div class="">
                       <div class="cong-coplj">
                        <div class="kshi-cop">
                            <div class="kshi-cop-cong" style="width:70px;">
                                <p style="margin-right:5px;"><img :src="itemc.user.avatar" alt=""></p>
                            </div>
                            <div class="kshi-cop-cong1">
                                <p style="font-size:14px;color:#bababa;width:100%;">{{itemc.user.name}}</p>
                                <p style="font-size:12px;color:#bababa;width:100%;">{{itemc.created_at}}</p>
                            </div>
                         </div>
                        <div class="item-coplj">
                            <p style="width:50%;color:#32B6C6;" v-if="itemc.zan !== null">
                               <i slot="icon" class="iconfont icon-dianzanmianxing"></i>
                               <span>{{itemc.zan_num}}</span>
                           </p>
                           <p style="width:50%;color:#bababa;" v-if="itemc.zan === null" @click="zan(itemc.id)">
                               <i slot="icon" class="iconfont icon-dianzan"></i>
                               <span>{{itemc.zan_num}}</span>
                           </p>
                           <p style="width:50%;color:#bababa;" @click="$router.push('/comments?pldi=' + itemc.id + '&&uid=' + itemc.user.id)">
                            <i slot="icon" class="iconfont icon-pinglun1"></i>
                            <span>{{itemc.comment_num}}</span>
                           </p>
                        </div>
                        
                       </div>
                    </div>
                </div>
            </flexbox-item>
        </flexbox>
        <div class="backgr-border">
            <div class="border-rolo" @click="$router.push('/postsBbs')"><i slot="icon" style="font-size: 30px;" class="iconfont icon-toudihefabu"></i></div>
        </div>
        <div >
            <popup v-model="show9" style="background:#fff;" position="left">
                <div style="width:200px;">
                    <p style="font-size:16px;color:#bababa;width:92%;margin-left:4%;border-bottom:1px solid #f4f4f4;line-height:40px;">帖子分类</p>
                    <div class="width-flld">
                        <p class="widbuttoms" v-for="(item,index) in staidc" :key="index" @click="staid(item)" :class="sleftd === item.id ? 'itemc' : ''">{{item.name}}</p>
                    </div>
                </div>
            </popup>
        </div>
        <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
            <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
            <empty slot="no-results" tips="暂时没有相关内容"></empty>
        </infinite-loading>
        </div>
    </view-box>
</template>

<script>
import { ViewBox, Box, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem, Popup } from 'vux'
const list = () => ['列表', '评论', '发贴']
export default {
  components: {
    ViewBox,
    Box,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Flexbox,
    FlexboxItem,
    Popup
  },
  data () {
    return {
      index01: 0,
      list2: list(),
      typeclick: 0,
      demoDisabled: 'A',
      index: 0,
      show9: false,
      items: [],
      sleftd: 0,
      sort_id: 0,
      category: 0,
      selcts: '帖子分类',
      sishuow: '',
      staidc: []
    }
  },
  mounted () {
    this.details()
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  created () {
    this.typeclick = parseInt(this.$route.query.typeclick)
  },
  watch: {
    index (news) {
      this.items = []
      this.$nextTick(() => {
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
      })
    }
  },
  methods: {
    staid (item) {
      this.sleftd = item.id
      this.sort_id = item.id
      this.show9 = false
      this.selcts = item.name
      this.$http.get('/forumPost/', {
        params: {
          sort_id: item.id,
          page: this.items.length / 20 + 1,
          page_size: 20
        }
      }).then(response => {
        this.items = response.data.data
        console.log(response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    infiniteHandler ($state) {
      if (this.index === 0) {
        this.$http.get('/forumPost', {
          params: {
            page: this.items.length / 20 + 1,
            page_size: 20
          }
        }).then((response) => {
          if (response.data.data.length) {
            this.items = this.items.concat(response.data.data)
            $state.loaded()
            if (!response.data.next_page_url) {
              $state.complete()
            }
          } else {
            $state.complete()
          }
        })
      } else if (this.index === 1) {
        this.$http.get('/forumPost', {
          params: {
            user_id: this.userInfo.id,
            page: this.items.length / 20 + 1,
            page_size: 20
          }
        }).then((response) => {
          if (response.data.data.length) {
            this.items = this.items.concat(response.data.data)
            $state.loaded()
            if (!response.data.next_page_url) {
              $state.complete()
            }
          } else {
            $state.complete()
          }
        })
      }
    },
    onItemClick (inx) {
      this.index = inx
      this.show9 = true
    },
    myClick (inx) {
      this.index = inx
    },
    zan (id) {
      this.$http.post('/forum/zan', {
        post_id: id
      }).then(response => {
        // this.myPrivac()
        this.$router.push({ path: '/forum' })
        this.$router.go(0)
        // console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },
    details () {
      this.$http.get('/forumSort').then(response => {
        this.staidc = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.button-o1{
    background: #fff;
    height: 40px;
    width: 50%;
    border-radius: 0px;
    color: #6D7BFE;
    border:1px solid #6D7BFE;

}
.itemc{
    color:#32B6C6
}
.button-o2{
    background: #6D7BFE;
    height: 40px;
    width: 50%;
    border-radius: 0px;
    color:#fff;
    border:1px solid #6D7BFE;
    
}
.postforum{
    width:100%;
    position: fixed;
    bottom: 0px;
    left:0px;
    display: flex;
}
.back-quer{
    width:94%;
    margin-left: 3%;
    background:#E5E5E5;
    border-radius: 8px;
    
}
.p-ljhg{
    width: 25%;
}
.p-ljhg img{
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.p-ljhg1{
    width: 75%;
}
.comh-pouii{
    width: 100%;
    display: flex
}
.plyt-cong{
    width: 100%;
    display: flex;
}
.cong-coplj{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.kshi-cop-cong{
    width: 25%;
}
.kshi-cop-cong img{
    width: 60px;
    height: 60px;
    border-radius: 100%;
    margin: 10%;
}
.kshi-cop-cong1{
    width: 75%;
}
.kshi-cop{
    width: 70%;
    display: flex;
}
.item-coplj{
    width: 30%;
    display: flex;
    align-items: flex-end;
}
    .vux-slider {
        height: 100%;
    }
    .myapplyForther{
        width: 100%;
        height: 79px;
        display:flex;
        background: #000;
    }
    .myapplyForther p{
        width: 100%;
        height: 79px; 
        line-height: 43.2px;
    }
    .myapplyForther span{
        font-size:27.49px;
        color: #fff;
    }
    .myapply-ciong{
        width: 100%;
        background: #fff;
        height: auto;
        /* display: flex; */
    }
    .myapply-ciong p{
        width: 50%;
        flex-wrap: wrap;
        line-height: 30px;
    }
    .myapply-span1{
        font-size: 15px;
        color:#333333;
        width: 100%;
        display:inline-block
    }
    .myapply-span2{
        width: 100%;
        font-size: 18.499px;
        color:#fe0001;
        display:inline-block
    }
    .myapply-span3{
        width: 100%;
        font-size:14px;
        color: #999999;
        display:inline-block
    }
    .img-ifo{
        width: 30%;
    }
    .img-ifo img{
        width: 60px;
        height: 60px;
        border-radius: 100%;
        padding: 20%;
    }
    .text-ifociuson{
        width: 70%;
        display: grid;
        align-items: center;
    }
    .fong-cpo{
      position: absolute;
      top: 0px;
      left: 8%;
    }
    .fong-cpoc{
      position: absolute;
      top: 0px;
      right: 36%; 
    }
    .a-click{
      width: 92%;
      border-bottom: 1px solid #f4f4f4;
      margin-left: 4%;
      padding-bottom: 10px;
    }
    .backgr-border{
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 123;
    }
    .border-rolo{
      width: 50px;
      height: 50px;
      background: #fff;
      border-radius: 100%;
      box-shadow: 0px 0.5px 5px 2px #deeff1;
      text-align: center;
      line-height: 50px;
      color: #8AB0B4;
      margin: 0 auto;
      margin-bottom: 10px;
    }
    .width-hiuy{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }
    .width-flld{
        width: 94%;
        margin-left: 0%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .widbuttoms{
        width: 40%;
        background: #f4f4f4;
        border-radius: 10px;
        padding:0px 5px; 
        line-height: 40px;
        text-align: center;
        margin-left: 4%;
        font-size: 14px;
        margin-top: 5px;
    }
</style>
<style>
.ounforum .vux-tab-ink-bar {
    position: absolute;
    height: 0px!important;
    bottom: 0;
    left: 0;
    background-color:#fff!important;
    text-align: center;
}
.ounforum .vux-tab .vux-tab-item.vux-tab-selected {
    color: #000;
    border-bottom: 3px solid #000;
}
.ounforum .vux-tab .vux-tab-item.vux-tab-selected .fong-cpo{
    color: #32B6C6;
    border-bottom: 3px solid #32B6C6;
}
.ounforum .vux-tab .vux-tab-item.vux-tab-selected .fong-cpoc{
    color: #32B6C6;
    border-bottom: 3px solid #32B6C6;
}
</style>
